<template>
  <div class="hello">
    <div ref="mapbox" style="width:90vw;height:80vh;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china.js";
import jsonp from "jsonp";
const option = {
  title: {
    text: "全国疫情实时分布变化图"
  },

  series: [
    {
      name: "确诊人数",
      type: "map",
      map: "china",
      label: {
        //控制对应地区的汉字
        show: true,
        color: "black", //控制地区名的字体颜色
        fontSize: 10
      },
      itemStyle: {
        //地图板块的颜色和边框
        areaColor: "#eee",
        borderColor: "#bdc3c7"
      },
      roam: true,
      zoom: 1.2, //控制地图的放大缩小
      emphasis: {
        label: {
          color: "#fff",
          fontSize: 12
        },
        itemStyle: {
          areaColor: "#83b5e7"
        }
      },
      data: [] //用来展示后台给的数据{name:,value:,}
    }
  ],
  visualMap: [
    {
      type: "piecewise",
      show: true,
      pieces: [
        //分段
        { min: 10000 },
        { min: 1000, max: 9999 },
        { min: 100, max: 999 },
        { min: 10, max: 99 },
        { min: 1, max: 9 }
      ]
    }
  ],
  tooltip: {
    trigger: "item"
  },
  toolbox: {
    show: true,
    orient: "vertical",
    left: "right",
    top: "center",
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  }
};
export default {
  name: "HelloWorld",
  // 生命周期
  mounted() {
    this.getData();
    this.mychart = echarts.init(this.$refs.mapbox);
    this.mychart.setOption(option);
  },
  // 方法
  methods: {
    // 获取数据
    getData() {
      jsonp(
        "https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427",
        {},
        (err, data) => {
          if (!err) {
            console.log(data);
            let list = data.data.list.map((item) => ({
              name: item.name,
              value: item.value
            }));
            option.series[0].data = list;
            this.mychart.setOption(option);
          }
        }
      );
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
